import Page from "@/components/page"
import UiFormButton from "@/components/ui/UiFormButton"
import { ShopEntity } from "@/interfaces/ShopEntity"
import { useMutation, useQuery } from "@apollo/client"
import { getShopForm } from "./shopForm"
import { useCallback, useMemo } from "react"
import UiButton from "@/components/ui/UiButton"
import moment from "moment"
import { openModal } from "@/components/ui/UiModal"
import { gqlError } from "@/libs/apollo-error"
import { SelShopListQuery, AddShopMutation, DelShopMutation, UpdShopMutation } from "@/queries/shop"
import { fileShear } from "@/libs/img"



const ShopPage = () => {
    const { data, refetch } = useQuery(SelShopListQuery)
    const [add] = useMutation(AddShopMutation, {
        onCompleted() {
            refetch()
        },
    })
    const [del] = useMutation(DelShopMutation, {
        onCompleted() {
            refetch()
        },
        onError(error) {
            gqlError(error)
        },
    });
    const [upd] = useMutation(UpdShopMutation, {
        onCompleted() {
            refetch()
        }
    })
    const onFinish = useCallback(async (variables: any) => {
        variables.avatar = await fileShear(variables.avatar, 100, 100);
        variables.threshold = Math.floor(Number(variables.threshold) * 100);
        variables.total = Math.floor(Number(variables.total) * 100);
        return await add({ variables }).then(() => "").catch(e => e.message)
    }, [])
    const shopList: ShopEntity[] = useMemo(() => data?.selShopList || [], [data]);
    const onUpd = useCallback(async (id: number, variables: any) => {
        if (!!variables.avatar) variables.avatar = await fileShear(variables.avatar, 100, 100);
        variables.threshold = Math.floor(Number(variables.threshold) * 100);
        variables.total = Math.floor(Number(variables.total) * 100);
        variables.id = id;
        return await upd({ variables }).then(() => "").catch(e => e.message)
    }, [])
    const onDel = useCallback((id: number) => {
        openModal(() => ({
            title: "删除后无法恢复，确认要删除吗？", onOk: () => {
                del({ variables: { id } })
                return true;
            }
        }))
    }, [])
    return (
        <Page>
            <div className="card m-2 bg-base-100 shadow-xl">
                <table className="table text-center">
                    <thead>
                        <tr>
                            <th className="flex justify-center">
                                <UiFormButton
                                    form={getShopForm()}
                                    onFinish={onFinish}
                                    btnProps={{
                                        text: "添加店铺",
                                    }}
                                />
                            </th>
                            <th>封面</th>
                            <th>店铺名</th>
                            <th>地址</th>
                            <th>店铺介绍</th>
                            <th>营业时间</th>
                            <th>起送费</th>
                            <th>配送费</th>
                            <th>收藏</th>
                            <th>月销售</th>
                            <th>更改时间</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {shopList.map((item) => {
                            const {
                                id,
                                createAt,
                                updateAt,
                                name,
                                information,
                                businessHours,
                                threshold,
                                total,
                                start,
                                count,
                                address,
                                hash_key
                            } = item
                            return (
                                <tr key={id}>
                                    <td>
                                        {id}
                                    </td>
                                    <td><img src={`${process.env.REACT_APP_BASE_URL}/media/shop/${hash_key}/avatar`} /></td>
                                    <td>{name}</td>
                                    <td>{address}</td>
                                    <td>{information}</td>
                                    <td>{businessHours}</td>
                                    <td>￥{threshold / 100}</td>
                                    <td>￥{total / 100}</td>
                                    <td>{start}</td>
                                    <td>{count}</td>
                                    <td>{moment(createAt).format("YYYY-MM-DD")}</td>
                                    <td>{moment(updateAt).format("YYYY-MM-DD")}</td>
                                    <td>
                                        <UiFormButton
                                            form={getShopForm(item)}
                                            onFinish={onUpd.bind(null, id)}
                                            btnProps={{
                                                text: "修改",
                                            }}
                                        />
                                        <UiButton onClick={onDel.bind(null, id)}>删除</UiButton>
                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        </Page>
    )
}
export default ShopPage